<template>
  <div>
    <h1>App</h1>

    <ul>
      <li>
        <router-link to="/users">UsersA</router-link>
      </li>
      <li>
        <router-link to="/users/a1">UsersA1</router-link>
      </li>
      <li>
        <router-link to="/users/a2">UsersA2</router-link>
      </li>
      <li>
        <router-link to="/users/a2/a21">UsersA21</router-link>
      </li>
      <li>
        <router-link to="/users/b/200?name=lili&age=21#abc">UsersB</router-link>
      </li>
      <li>
        <router-link :to="{ path: '/users/b/100', query: { name: 'jack', age: 20, }, hash: 'abc' }">UsersB</router-link>
      </li>
    </ul>

    <button @click="toUsersA">UsersA</button>
    <button @click="toUsersB">UsersB</button>
    <hr>
    <button @click="$router.go(-1)">后退</button>
    <button @click="$router.go(1)">前进</button>
    <button @click="$router.go(0)">刷新</button>

    <hr>

    <ul>
      <li>
        <router-link :to="{ name: 'users' }">UsersA</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'users-a21' }">UsersA21</router-link>
      </li>
      <li>
        <!-- <router-link to="/users/b/200?name=lili&age=21#abc">UsersB</router-link> -->
        <router-link
          :to="{ name: 'usersb', params: { id: 200 }, query: { name: 'lili', age: 21 }, hash: 'abc' }">UsersB</router-link>
      </li>
    </ul>

    <router-view></router-view>
  </div>
</template>
<script>
export default {
  methods: {
    async toUsersA() {
      this.$router.replace({ path: '/users/a1' }).catch(() => { })

    },
    async toUsersB() {
      // try {
      //   await this.$router.push('/users/b/200?name=lili&age=21#abc')
      // } catch (error) { }

      this.$router.replace({ path: '/users/b/100', query: { name: 'jack', age: 20, }, hash: 'abc' }).catch(() => { })
      // this.$router.push({ path: '/users/b/100', query: { name: 'jack', age: 20, }, hash: 'abc' }).catch(() => { })

    }
  }
}
</script>

<style>
div {
  padding: 10px;
  margin: 10px;
  border: solid;
}
</style>